<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="node">
        <!--明天是七夕 但是还得上课-->
        <p> 明天要过节</p>
        上课只是摸鱼
    </div>
    <ul>
        <li>余俊杰</li>
        <li>袁晓宇</li>
        <li>王浩</li>
        <li>汪涵</li>
        <li>李志远</li>
        <li>白天宇</li>
        <li>王美丽</li>
    </ul>
</body>

</html>
<script>
    //节点的类型：
    // 1、元素节点（标签）
    // 2、注释节点
    // 3、属性节点（标签上设置的属性）
    // 4、文本节点（双标签中的内容，空白文本也是）
    
    //一、获取节点
    let childNodes=document.querySelector('div').childNodes;
    let attrs=document.querySelector('div').attributes;
    console.log(childNodes);
    console.log(attrs);

    //节点共有属性：
    //nodeType
    console.log(childNodes[0].nodeType);
    console.log(childNodes[1].nodeType);
    console.log(childNodes[3].nodeType);
    console.log(attrs[0].nodeType);

    //nodeName 节点名称
    //元素节点获取的是标签的大写单词
    console.log(childNodes[0].nodeName);
    console.log(childNodes[1].nodeName);
    console.log(childNodes[3].nodeName);
    console.log(attrs[0].nodeName);

    let dom=document.querySelector('div');
    //获取第一个子节点
    console.log(dom.firstChild);
    //获取最后一个子节点
    console.log(dom.lastChild);
    //获取下一个兄弟节点
    console.log(dom.firstChild.nextSibling);
    //获取最后一个子节点
    console.log(dom.lastChild.previousSibling);

    //获取子元素节点
    let ul=document.querySelector('ul');

    //获取所有子元素节点
    console.log(ul.children);
    //获取第一个子元素节点
    console.log(ul.firstElementChild);
    //获取最后一个子元素节点
    console.log(ul.lastElementChild);
    //获取下一个兄弟节点
    console.log(ul.firstElementChild.nextElementSibling);
    //获取上一个兄弟节点
    console.log(ul.lastElementChild.previousElementSibling);
</script>